<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=10" />
  <title>Log Chartxxx</title>

  <script src="/lib/jquery/dist/jquery.min.js"></script>
  <script src="/lib/d3/d3_v3.3.3.min.js"></script>
  <script src="/lib/requirejs/require.min.js"></script>


  <style>
    body {
      font: 12px Arial;
    }
    
    path {
      stroke: steelblue;
      stroke-width: 2;
      fill: none;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: grey;
      stroke-width: 1;
      shape-rendering: crispEdges;
    }
    
    .brush .extent {
      stroke: #fff;
      fill-opacity: .125;
      shape-rendering: crispEdges;
    }
    
    .loader {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.8);
      text-align: center;
      z-index: 99;
      display: none;
    }
    
    .loader p {
      margin-top: 180px;
    }
  </style>

  
  <script type="text/javascript">
    'use strict';

    $(function() {

      requirejs.config({
        "baseUrl": "./",
        "paths": {
          "app": "./",
          //'moment': 'http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min',
          'moment': '/lib/moment/min/moment.min',
          //'underscore': 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min'
          'underscore': '/lib/underscore/underscore-min'
        }
      });


      require(['d3.chart'], function(d3Chart) {
        d3Chart.init({
          container: '#container',
          xDim: 'DateTime'
        });
        //d3Chart.addGraph({ id: 'Speed', type: 'horizon', name: 'Speed', dataId: 512, yVal: ['Value'], data: speedData });
        d3Chart.addGraph({
          id: 'Imps',
          type: 'analog',
          name: 'RPM',
          dataId: 513,
          yVal: ['Value'],
          data: imps1
        });
        d3Chart.addGraph({
          id: 'Clicks',
          type: 'analog',
          name: 'RPM2',
          dataId: 513,
          yVal: ['Value'],
          data: imps2
        });
        /*
        d3Chart.addGraph({
          id: 'CTR',
          type: 'analog',
          name: 'CTR',
          dataId: 513,
          yVal: ['Value'],
          data: CTR
        });//*/
        //d3Chart.addGraph({ id: 'DI', type: 'digital', name: 'Digital Input', dataId: 522, data: diData });

        //d3Chart.addGraph({ id: 'Accel', type: 'analog', name: 'Accel', dataId: 522, yVal: ['X', 'Y', 'Z'], data: accelData });
        //d3Chart.render();
        /*
        setTimeout(function() {
          //d3Chart.reorderGraph('Accel', 'up');

          //window.setTimeout(function () {
          //    d3Chart.removeGraph('RPM');
          //}, 2000);

        }, 3000);//*/
      });
      console.log('Cool~');

    });
  </script>
  
</head>

<body>
  <script src="./sample_data.js"></script>
  <div id="container" style="min-width:300px;width:100%">
    <div class="loader">
      <p>Working...</p>
    </div>
  </div>
</body>
</html>

